<template>
  <div class="common-layout">
    <el-container class="lay-container">
      <!-- 自定义左侧组件，侧边栏 -->
      <common-aside class="left-aside" />
      <el-container class="right-container">
        <el-header class="el-header">
          <common-header></common-header>
        </el-header>
        <common-tab></common-tab>
        <el-main class="right-main">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ElContainer } from "element-plus";
import CommonAside from "@/components/CommonAside.vue";
import CommonHeader from "@/components/CommonHeader.vue";
import CommonTab from "@/components/CommonTab.vue";

// Add component logic here
</script>

<style scoped lang="less">
.common-layout,
.lay-container {
  height: 100%;
  width: 100%;
}
.el-header {
  padding: 0;
  background-color: #2C3E50;
}
// 对lay-container进行管理，left-aside放左边，right-container右边
.lay-container {
  display: flex;
  .right-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    .right-main {
      flex: 1;
    }
  }
}

.right-main {
  background-color: #fff;
}
</style>